<template>
  <div class="demo">
    <h2>vuex运用</h2>
    <div class="vuex-box">
      <el-button style="margin-right: 10px" @click="ADD">+</el-button>
      <el-button style="margin-right: 10px" @click="addwait">异步加</el-button>
      {{ count }}
      <el-button @click="subtractwait">异步减</el-button>
      <el-button @click="SUBTRACT">-</el-button>
    </div>
    <h2>获取屏幕实时宽高</h2>
    <div>屏幕宽度为：{{ windowWidth }} 屏幕高度为：{{ windowHeight }}</div>
    <h2>mock数据测试</h2>
    <div>
      <el-input v-model="mocktest.name" placeholder="请输入用户名"></el-input>
      <el-input
        v-model="mocktest.password"
        placeholder="请输入密码"
        show-password
        style="margin-top: 10px"
      ></el-input>
      <el-button @click="btn1" style="margin-top: 10px">保存用户信息</el-button>
    </div>
    <h2>后端接口(数据库)测试</h2>
    <div>
      <el-button @click="btn2" style="margin-top: 10px">获取用户信息列表</el-button>
      <el-table :data="personlist" stripe style="width: 100%">
        <el-table-column type="index" />
        <el-table-column prop="id" label="用户ID" />
        <el-table-column prop="name" label="用户姓名" />
        <el-table-column prop="password" label="密码" />
        <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
import { test1, getPersonList } from "../api/index";
export default {
  data() {
    return {
      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight, //实时屏幕高度
      mocktest: {
        name: null,
        password: null,
      },
      personlist: [],
    };
  },
  mounted() {
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        that.windowHeight = window.fullHeight; // 高
        that.windowWidth = window.fullWidth; // 宽
      })();
    };
  },
  computed: {
    count1() {
      console.log(this.$store);
      return 123;
    },
    ...mapState("count", ["count"]),
  },
  watch: {
    windowHeight(val) {
      let that = this;
      console.log("实时屏幕高度：", val, that.windowHeight);
    },
    windowWidth(val) {
      let that = this;
      console.log("实时屏幕宽度：", val, that.windowHeight);
    },
  },
  methods: {
    // vuex
    // add() {
    //   this.$store.commit('count/ADD');
    // },
    // addwait() {
    //   this.$store.dispatch('addwait', 1);
    // },
    // subtract() {
    //   this.$store.commit('SUBTRACT');
    // },
    // subtractwait() {
    //   this.$store.dispatch('subtractwait')
    // }
    // ...mapMutations({add:'ADD',subtract:'SUBTRACT'}),
    ...mapMutations("count", ["ADD", "SUBTRACT"]),
    ...mapActions("count", ["addwait", "subtractwait"]),

    async btn1() {
      try {
        const res = await test1(this.mocktest)
        console.log(res, "====res")
        this.mocktest.name = null
        this.mocktest.password = null
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    async btn2() {
      try {
        const res = await getPersonList()
        console.log("personlist====", res)
        if(res.data.rows.length>0){
          this.personlist = res.data.rows
        }else{
          this.$message.warning('数据库中暂无数据')
        }
      } catch (err) {
        this.$message.warning('数据库中暂无数据')
      }
    },
  },
};
</script>
<style lang="less" scoped>
.demo {
  .vuex-box {
    display: flex
  }
}
</style>
